<template>
  <div class="container">
    <div class="box">
      <div class="item" :class="flag?'up':''">
        <div class="signUp">
          <div class="title">
            注册
          </div>
          <input type="text" placeholder="QQ" v-model="account">
          <div class="code">
            <input type="text" placeholder="验证码" v-model="c">
            <button @click="code">发送</button>
          </div>
          <input type="text" placeholder="密码" v-model="pwd">

          <button @click="handelSign">验证</button>
        </div>

        <div class="login" v-if="!forget">
          <div class="title">
            登陆
          </div>
          <input type="text" placeholder="账号（qq）" v-model="account">
          <input type="password" placeholder="密码" v-model="pwd">
          <div class="text"><span @click="signUp">注 册</span> <span @click="Forget">忘记密码</span></div>
          <button @click="login">登陆</button>
        </div>

        <div class="forget" v-if="forget">
          <div class="title">
            忘记密码
          </div>
          <input type="text" placeholder="QQ号" v-model="account">
          <div class="code">
            <input type="text" placeholder="验证码" v-model="c">
            <button @click="code">发送</button>
          </div>
          <input type="text" placeholder="新密码" v-model="pwd">
          <button @click="handelForget">验证</button>
        </div>
      </div>

    </div>
  </div>
</template>

<script setup>
import {ref, reactive} from "vue";

import {useRouter} from "vue-router";
import axios from "../plugins/axios"
const flag = ref(true)
const forget = ref(false)
const account = ref("")
const pwd = ref("")
const c = ref("")
const login = () => {
  if(account.value.length>3&&pwd.value.length>4){
    axios.post('login',{
      qq:account.value,
      pwd:pwd.value
    },1,account.value)
  }
  else{
       showNotify({type: 'success', message:"请输入正确数据"});
  }

}
const Forget = () => {
  account.value=''
  pwd.value=""
  forget.value = true
}
const handelForget = ()=>{
  if(account.value.length>3&&pwd.value.length>4&&c.value.length==6){
    axios.post('login/forget',{
      qq:account.value,
      pwd:pwd.value,
      code:c.value
    },"网络异常",1,account.value)
  }else{
      showNotify({type: 'danger', message:"请输入正确数据"});
  }
}
const handelSign = ()=>{
  if(account.value.length>3&&pwd.value.length>4&&c.value.length==6){
    axios.post('login/sign',{
      qq:account.value,
      pwd:pwd.value,
      code:c.value
    },1,account.value)
  }else{
      showNotify({type: 'danger', message:"请输入正确数据"});
  }
}
const signUp = () => {
    account.value=''
  pwd.value=""

  flag.value = false

}
const code = ()=>{
  axios.get("login",{qq:account.value})
}
</script>

<style scoped lang="less">

.container {
  border: 0 solid transparent;
}

.box {
  width: 300px;
  height: 310px;
  overflow: hidden;
  background-color: rgba(255, 255, 255, .4);
  margin: 100px auto;

  border-radius: 10px;

  .code{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 200px;

     input{
       width: 120px;
     }
    button{
      width: 40px;
      height: 20px;
      font-size: 14px;
      border-radius: 10px;
    }
  }

  .item {
    width: 100%;
    transition: all 1s linear 0s;

    .signUp{
      height: 270px;

    }

    .text{
      color:black;
      height: 50px;
      span{
        display: inline-block;
     margin-top: 20px;
        height: 50px;
        box-sizing: border-box;
        line-height: 50px;
        transform: translateY(-10px);
        margin-right: 20px;
      }
    }
  }
  .signUp,
  .login,
  .forget{
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
  }

  .up {
    transform: translateY(-270px);
  }
  .login,
  .forget{
    margin-top:30px;
  }

  .title {
    font-size: 20px;
    letter-spacing: 3px;
    line-height: 50px;
    font-weight: 700;

  }

  input {
    background-color: transparent;
    color: #000000;
    margin-top: 20px;
    border: 0 transparent solid;
    border-bottom: #909399 1px solid;
    font-size: 14px;
    letter-spacing: 2px;
    width: 200px;
  }
  button{
    border:0 transparent solid;
    margin-top:20px;
    width: 200px;
    height: 50px;
    border-radius: 25px;
    background-color: #409EFF;
    color:#ffffff;

  }

}

</style>